﻿<!DOCTYPE html>
<html>
<head>
    <style>
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
        canvas { width: 100% !important; height: 100% !important; position: fixed; }
    </style>
    <script src="pixi.js"></script>
    <script src="../bin/pixi-ui.js"></script>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

</head>
<body>
    <script type="text/javascript">
        PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;
        PIXI.settings.RESOLUTION = devicePixelRatio || 1;
        var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, { resolution: devicePixelRatio || 1, transparent: true });
        var stage = new PIXI.Container();
        var uiStage = new PIXI.UI.Stage(window.innerWidth, window.innerHeight);
        uiStage.minHeight = 315;
        uiStage.minWidth = 500;

        var dragContainer = new PIXI.UI.Container();
        document.body.appendChild(renderer.view);
        stage.addChild(uiStage);
        var resizeFunction = function () {
            renderer.resize(window.innerWidth, window.innerHeight);
            uiStage.resize(window.innerWidth, window.innerHeight);
        }
        window.addEventListener("resize", resizeFunction);
        resizeFunction();
        PIXI.loader.add('UISprites.json').load(function () {
            init();
        });


        function init() {
            var cb1_bg = PIXI.Texture.fromFrame("UI/cb-1-bg.png");
            var cb1_mark = PIXI.Texture.fromFrame("UI/cb-1-mark.png");
            var cb2_bg = PIXI.Texture.fromFrame("UI/cb-2-bg.png");
            var cb2_mark = PIXI.Texture.fromFrame("UI/cb-2-mark.png");

            var whiteBG = PIXI.Texture.fromFrame("UI/ui-box-1.png");
            var innerBG = PIXI.Texture.fromFrame("UI/ui-box-2.png");
            var solidBox = PIXI.Texture.fromFrame("UI/solid-box.png");
            var lineSprite = PIXI.Texture.fromFrame("UI/ui-horizontal-line-border.png");
            var textStyle = { fill: '#000000', fontSize: 18, fontFamily: 'Lucida Sans Typewriter' };

            container = new PIXI.UI.Container();
            container.anchorBottom = container.anchorTop = container.anchorRight = container.anchorLeft = 10;
            container.minHeight = 285;
            uiStage.addChild(container);

            textInput = new PIXI.UI.TextInput({
                value: "Hello!\n\nYou know you're ugly when you get handed the camera every time they make a group photo.\n\nI asked my mom if by any chance I was adopted. She replied: Hilarious. Why would we choose you?\n\nWhat is the difference between a snowman and a snowwoman?\n- Snowballs.\n\nI asked my mom if by any chance I was adopted. She replied: Hilarious. Why would we choose you?",
                style: { fill: '#000000', fontSize: 20, fontFamily: 'Calibri' },
                background: new PIXI.UI.SliceSprite(solidBox, 8),
                width: "100%",
                height: 200,
                padding: 6,
                paddingLeft: 10,
                paddingRight: 15,
                tabIndex: 1,
                multiLine: true,
                lineHeight: 27
            });

            textInput.background.alpha = .2;
            textInput.on("focusChanged", function (focus) {
                textInput.background.alpha = focus ? 0.4 : 0.2;
            });
            textInput.on("change", function () {
                //console.log("Change:", this.value);
            });
            container.addChild(textInput);

            scrollbar = new PIXI.UI.ScrollBar({
                track: new PIXI.UI.SliceSprite(whiteBG, 3),
                handle: new PIXI.UI.SliceSprite(whiteBG, 3),
                scrollingContainer: textInput.textContainer,
                vertical: true,
                autohide: true
            });
            scrollbar.width = 8;
            scrollbar.anchorRight = scrollbar.anchorBottom = scrollbar.anchorTop = 3;
            scrollbar.track.width = scrollbar.handle.width = 11;
            scrollbar.handle.tint = 0x999999;
            textInput.addChild(scrollbar);


            textInput2 = new PIXI.UI.TextInput({
                value: "Hello world!",
                style: { fill: '#000000', fontSize: 20, fontFamily: 'Calibri' },
                background: new PIXI.UI.SliceSprite(solidBox, 8),
                width: "100%",
                height: 33,
                padding: 6,
                paddingLeft: 10,
                tabIndex: 2
            });
            textInput2.y = 210;
            textInput2.background.alpha = .2;
            textInput2.on("focusChanged", function (focus) {
                textInput2.background.alpha = focus ? 0.4 : 0.2;
            });
            container.addChild(textInput2);






            checkbox = new PIXI.UI.CheckBox({ checked: true, background: new PIXI.UI.Sprite(cb1_bg), checkmark: new PIXI.UI.Sprite(cb1_mark) });
            checkbox.anchorBottom = 0;
            checkbox.background.alpha = 0.6;
            checkbox.on("focusChanged", function (focus) {
                this.background.alpha = focus ? 0.9 : 0.6;
            });
            container.addChild(checkbox);

            checkbox2 = new PIXI.UI.CheckBox({
                checked: true,
                background: new PIXI.UI.Sprite(cb1_bg),
                checkmark: new PIXI.UI.Sprite(cb1_mark)
            });
            checkbox2.anchorBottom = 0;
            checkbox2.x = 50;
            checkbox2.background.alpha = 0.6;
            checkbox2.on("focusChanged", function (focus) {
                this.background.alpha = focus ? 0.9 : 0.6;
            });

            //override the inner change function (to avoid alpha = 0 on checkmark)
            checkbox2.change = function (checked) {
                if (checked)
                    PIXI.UI.Tween.fromTo(this.checkmark, 0.4, { rotation: 1, alpha: 0, scale: 2 }, { rotation: 0, alpha: 1, scale: 1 }, PIXI.UI.Ease.Bounce.BounceOut);
                else
                    PIXI.UI.Tween.to(this.checkmark, 0.3, { alpha: 0, rotation:3, scale:0 }, PIXI.UI.Ease.Sine.SineOut);
            };


            container.addChild(checkbox2);

            for (var i = 1; i <= 5; i++) {
                (function () {
                    var cb = new PIXI.UI.CheckBox({
                        checked: i === 1,
                        background: new PIXI.UI.Sprite(cb2_bg),
                        checkmark: new PIXI.UI.Sprite(cb2_mark),
                        checkgroup: "test",
                        value: "checkbox " + i
                    });
                    cb.checkmark.pivot = 0.5;
                    cb.checkmark.scale = 1.15;
                    cb.anchorBottom = 0;
                    cb.x = 50 + (50 * i);
                    cb.background.alpha = 0.6;
                    cb.on("focusChanged", function (focus) {
                        cb.background.alpha = focus ? 0.9 : 0.6;
                    });
                    cb.on("change", function (checked) {
                        if (checked) {
                            textInput2.text = cb.value;
                            PIXI.UI.Tween.fromTo(this.checkmark, 0.4, { alpha: 0, scale: 2.5 }, { alpha: 1, scale: 1.15 }, PIXI.UI.Ease.Bounce.BounceOut);
                        }
                        else {
                            PIXI.UI.Tween.fromTo(this.checkmark, 0.2, { alpha: 1, scale: 1.15 }, { alpha: 0, scale: 0 }, PIXI.UI.Ease.Sine.SineOut);
                        }
                        
                    });
                    container.addChild(cb);
                })();
            }

            Update();
        }

        function Update() {
            renderer.render(stage);
            requestAnimationFrame(Update);
        }

    </script>
</body>
</html>
